<template>
	<view class="offerContainer">
		<!-- 头部提示区域开始 -->
		<view class="header">
			<text>注：此报价系统只能预算大致价格，如需详细配置清单及详细报价方案，请拨打咨询热线或点击在线咨询服务</text>
		</view>
		<!-- 头部提示区域结束 -->
		<!-- 表单区域开始 -->
		<view class="offerForm">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="请选择冷库类型">
					<u-input placeholder="请选择" v-model="form.name" type="select" border @click="show = true" />
					<u-select v-model="show" :list="actionSheetList" @confirm="confirm"></u-select>
					</u-action-sheet>
				</u-form-item>
				<u-form-item label="请输入您的建设面积">
					<u-input v-model="form.area" border placeholder="请输入平方数" />
				</u-form-item>
				<u-form-item label="请选择您的修建日期">
					<u-input placeholder="请选择" v-model="form.time" type="select" border @click="timeShow = true" />
					<u-picker mode="time" v-model="timeShow" :params="params" @confirm="getTime"></u-picker>
				</u-form-item>
				<u-form-item label="请选择您的修建地址">
					<u-input placeholder="请选择" v-model="form.address" type="select" border @click="openLocation" />
				</u-form-item>
				<u-form-item label="请选择您的建设类型">
					<u-input placeholder="请选择" v-model="form.buildType" type="select" border
						@click="buildShow = true" />
					<u-select v-model="buildShow" :list="buildList" @confirm="buildConfirm"></u-select>
					</u-action-sheet>
				</u-form-item>
			</u-form>
			<view class="btn" @click="toDetail">
				<text>提交咨询</text>
			</view>
		</view>
		<!-- 表单区域结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 时间选择器格式数据
				params: {
					year: true,
					month: true,
					day: true,
					timestamp: true
				},
				form: {
					name: "",
					area: "",
					time: "",
					address: "",
					buildType: "补贴项目"
				},
				// 类型选择器的显示与隐藏
				buildShow: false,
				// 时间选择器的显示与隐藏
				timeShow: false,
				show: false,
				buildList: [{
						label: "自建"
					},
					{
						label: "农业补贴"
					}
				],
				actionSheetList: [{
						label: '保鲜库（2℃~8℃）'
					},
					{
						label: '冷冻库（-15℃~ -25℃）'
					},
					{
						label: '气调库'
					}
				],
			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			},
			confirm(e) {
				for (const item of e) {
					this.form.name = item.label
				}
			},
			buildConfirm(e) {
				for (const item of e) {
					this.form.buildType = item.label
				}
			},
			getTime(e) {
				const time = new Date(e.timestamp).Format("yyyy-MM-dd")
				this.form.time = time
			},
			// 打开地图
			openLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.form.address = res.address
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			},
			// 跳转到预算详情页
			toDetail(){
				uni.navigateTo({
					url:"offerDetail/offerDetail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.offerContainer {
		padding: 10rpx 20rpx;

		.header {
			color: red;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 40rpx;
			text-indent: 1rem;
		}
		.btn{
			border: 1rpx solid #C0C0C0;
			padding: 10rpx;
			text-align: center;
			font-size: 26rpx;
			border-radius: 10rpx;
			background: #1AA8CE;
			color: #FFFFFF;
		}
	}
</style>
